import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home/index.vue'

Vue.use(VueRouter) // 插件形式调用

// 定义路由规则
// 如果多次使用的组件，推荐 先引入后调用
// 如果只使用一次，推荐使用懒加载
// 如果需要分割代码，/* webpackChunkName: "about" */ yarn build 体验
const routes = [
  { // 路由的重定向
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home', // 命名路由
    component: Home // 先引入后调用
  },
  {
    path: '/kind',
    name: 'kind',
    // 路由懒加载 - 跳转到路由才加载组件
    // component: () => import('./../views/kind/index.vue')
    // 代码分割
    component: () => import('./../views/kind/index.vue')
  },
  {
    path: '/cart',
    name: 'cart',
    // 路由懒加载
    // component: () => import('./../views/cart/index.vue')
    component: () => import('./../views/cart/index.vue')
  },
  {
    path: '/user',
    name: 'user',
    // 路由懒加载
    component: () => import('./../views/user/index.vue')
  },
  {
    path: '/detail/:proid', // 动态路由
    name: 'detail', // 命名路由
    component: () => import('./../views/detail/index.vue'), // 路由懒加载
    meta: { // 路由元信息
      hidden: true // 隐藏底部的导航
    }
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('./../views/login/index.vue'),
    meta: {
      hidden: true
    }
  },
  {
    path: '/register',
    name: 'register',
    redirect: '/register/step1',
    component: () => import('./../views/register/index.vue'),
    meta: {
      hidden: true
    },
    children: [
      {
        path: 'step1',
        name: 'regStep1',
        component: () => import('./../views/register/step1.vue'),
        meta: {
          hidden: true
        }
      },
      {
        path: 'step2',
        name: 'regStep2',
        component: () => import('./../views/register/step2.vue'),
        meta: {
          hidden: true
        }
      },
      {
        path: 'step3',
        name: 'regStep3',
        component: () => import('./../views/register/step3.vue'),
        meta: {
          hidden: true
        }
      }
    ]
  },
  {
    path: '*',
    component: () => import('./../views/error/notFound.vue')
  },
  {
    path: '/order/:time',
    name: 'order',
    component: () => import('../views/order/index.vue')
  },
  {
    // 因为订单地址列表页面，点击 某一个地址时先修改订单地址，然后返回上一页
    // 修改订单的地址 需要知道 哪一个用户在哪一个时间内下的订单（一个时间内可以下很多个订单）
    path: '/orderaddresslist/:time',
    name: 'orderaddresslist',
    component: () => import('../views/order/list.vue')
  },
  {
    // 因为添加订单地址页面，点击 保存并使用该地址，然后返回确认订单页面
    // 修改订单的地址 需要知道 哪一个用户在哪一个时间内下的订单（一个时间内可以下很多个订单）
    path: '/orderaddressadd/:time',
    name: 'orderaddressadd',
    component: () => import('../views/order/add.vue')
  },
  {
    path: '/search',
    name: 'search',
    component: () => import('../views/search/index.vue')
  },
  {
    path: '/searchresult', // /searchresult?keyword=111
    name: 'searchresult',
    component: () => import('../views/search/result.vue')
  },
  {
    path: '**',
    component: () => import('../views/home/index.vue')
  }
  // {
  //   path: '/',
  //   name: 'Home',
  //   component: Home
  // },
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
]

// 创建路由管理器
const router = new VueRouter({
  mode: 'history', // hash
  base: process.env.BASE_URL,
  routes
})

export default router
